<template>
  <ul>
    <router-link
      tag="li"
      to="/film/pagefirst"
      class="left-li"
      @click.native="leftClick"
      ><p :class="{ 'mborder-bottom': isActive == 0 }">正在热映</p></router-link
    >
    <router-link
      tag="li"
      to="/film/pagesecond"
      class="right-li"
      @click.native="rightClick"
      ><p :class="{ 'mborder-bottom': isActive == 1 }">即将上线</p></router-link
    >
  </ul>
</template>
<script>
export default {
  name: "FilmHeader",
  data() {
    return {
      isActive: 0,
    };
  },
  methods: {
    leftClick() {
      this.isActive = 0;
    },
    rightClick() {
      this.isActive = 1;
    },
  },
  mounted() {
    if (this.$route.name === "PageSecond") {
      this.isActive = 1;
    } else {
      this.isActive = 0;
    }
  },
};
</script>
<style lang="less" scoped>
ul {
  display: flex;
  z-index: 999;
  width: 100%;
  background: white;
  position: sticky;
  top: -1px;
  left: 0;
  .left-li,
  .right-li {
    flex: 1;
    height: 49px;
    text-align: center;
    line-height: 49px;
    list-style: none;
  }
}
p {
  width: 58px;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
}
.container {
  width: 100%;
  margin: 0 auto;
}
.mborder-bottom {
  color: #ff5f16;
  border-bottom: 2px solid #ff5f16;
}
</style>